<template>
  <div class="m-paging">
  	<ul class="m-pagination">
  		<li class="prev" :class="{disabled: props.current <= 1}" 
  			@click="changePage(props.current-1, props.pageSize)"><LeftOutlined /></li>
  		<li class="item" 
  			:class="{active: props.current == 1}"
  			@click="changePage(1, props.pageSize)">1</li>
  		<template v-if="centerItems.length">
  			<li v-if="centerItems[0] > 2" class="jump-btn jump-prev" @click="changePage(props.current-5, props.pageSize)">
	  			<span class="ellipsis">•••</span>
	  			<DoubleLeftOutlined class="icon" />
	  		</li>
	  		<li v-for="(item, index) in centerItems" :key="index" class="item" 
	  			:class="{active: props.current == item}"
	  			@click="changePage(item, props.pageSize)">{{item}}</li>
	  		<li v-if="centerItems[centerItems.length-1] < maxCurrent-1" class="jump-btn jump-next" @click="changePage(props.current+5, props.pageSize)">
	  			<span class="ellipsis">•••</span>
	  			<DoubleRightOutlined class="icon" />
	  		</li>
  		</template>
  		<li v-if="maxCurrent > 1" class="item" 
  			:class="{active: props.current == maxCurrent}"
  			@click="changePage(maxCurrent, props.pageSize)">{{maxCurrent}}</li>
  		<li class="next" :class="{disabled: props.current >= maxCurrent}" 
  			@click="changePage(props.current+1, props.pageSize)"><RightOutlined /></li>
  	</ul>
  </div>
</template>

<script setup>
	import { reactive, ref, computed, onMounted } from 'vue'
	import { LeftOutlined, DoubleLeftOutlined, DoubleRightOutlined, RightOutlined } from '@ant-design/icons-vue';

	const emits = defineEmits(['change']);

	const props = defineProps({
		current: {
			type: Number,
			default: 1
		},
		pageSize: {
			type: Number,
			default: 10
		},
		total: {
			type: Number,
			default: 0
		}
	})

	// 计算最大页数
	const maxCurrent = computed(() => {
		return props.total > 0 ? Math.ceil(props.total / props.pageSize) : 0;
	})
	// 中间显示的列表
	const centerItems = computed(() => {
		let max = maxCurrent.value;
		let arr = [];
		if([1,2].indexOf(props.current) != -1) {
			arr = [2,3,4];
		} else if ([max-1, max].indexOf(props.current) != -1) {
			arr = [max-3,max-2,max-1]
		} else {
			for(let i = -1; i <= 1; i++) {
				arr.push(props.current+i);
			}
		}
		return arr.filter(item => {
			return item > 1 && item < max;
		})
	})

	// 改变页与页数
	function changePage(current, pageSize) {
		if(current < 1) {
			current = 1;
		} else if (current > maxCurrent.value) {
			current = maxCurrent.value;
		}
		if(current != props.current || pageSize != props.pageSize) {
			emits('change', current, pageSize);
		}
	}
</script>

<style lang="less" scoped>
.m-paging {
	display: inline-block;
	.m-pagination {
		display: flex;
		margin: 0;
		padding: 0;
		li {
			margin: 0 2px;
			border: 1px solid #015f81;
			height: 26px;
			min-width: 26px;
			padding: 3px;
			font-size: 12px;
			line-height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			cursor: pointer;
			border-radius: 4px;
			&.disabled {
				cursor: not-allowed;
			}
			&.active {
				background: #092A4C;
				font-weight: bold;
				color: #39B3FF;
			}
		}
		.jump-btn {
			&:hover {
				.ellipsis {
					display: none;
				}
				.icon {
					display: block;
				}
			}
			.icon {
				display: none;
			}
		}
	}
}
</style>